根据udacity课程学习的笔记。

教程和文档

Google Maps JavaScript API V3 Reference

1. 地理编码

在地址和经纬度之间转换

地理编码是将地址（如“1600 Amphitheatre Parkway, Mountain View, CA”）转换为地理坐标（如纬度 37.423021 和经度 -122.083739）的过程，您可以借此在地图上放置标记，或在地图上定位。

反向地理编码是将地理坐标转换为可人工读取的地址的过程。反向地理编码器还可让您找到对应于给定的地点 ID 的地址。

地理编码查询

地理编码服务

地理编码 API Geocoding API

地理编码的 状态代码 和 地址和组成部分类型

地理寻宝游戏Geocaching

Google Maps Geocoding API 请求使用以下格式：

https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters

//json输出
https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY
//XML输出
https://maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY
//parameters参数：地址&密钥

示例
请求

1
https://maps.googleapis.com/maps/api/geocode/json?key=输入API&latlng=30.315099,120.342865

返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
{
   "results" : [
      {
        "//":"地址要素部分，分解信息为街道、城镇、社区、州、国家等",
        "//":"详情查阅前面地址类型和地址组成部分类型链接",
         "address_components" : [
            {
               "long_name" : "问鼎西路",
               "short_name" : "问鼎西路",
               "types" : [ "route" ]
            },
            {
               "long_name" : "下沙",
               "short_name" : "下沙",
               "types" : [ "neighborhood", "political" ]
            },
            {
               "long_name" : "江干区",
               "short_name" : "江干区",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "杭州市",
               "short_name" : "杭州市",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "浙江省",
               "short_name" : "浙江省",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "中国",
               "short_name" : "CN",
               "types" : [ "country", "political" ]
            }
         ],
         "//":"格式化地址",
         "formatted_address" : "中国浙江省杭州市江干区下沙问鼎西路",
         "//":"几何图形包含实际位置的经纬度和其他重要信息",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 30.314869,
                  "lng" : 120.3432986
               },
               "southwest" : {
                  "lat" : 30.3116694,
                  "lng" : 120.3429376
               }
            },
            "//":"经纬度",
            "location" : {
               "lat" : 30.3131545,
               "lng" : 120.3429652
            },
            "//":"位置类型告诉我们返回点的更多信息",
            "//":"rooftop屋顶说明获得了位置的全部匹配",
            "//":"若是range interpolated差值范围：地理编码根据周围点近似的一个点",
            "//":"若是geometric center几何中心：获得一条线的中心点",
            "location_type" : "GEOMETRIC_CENTER",
            "viewport" : {
               "northeast" : {
                  "lat" : 30.314869,
                  "lng" : 120.3444670802915
               },
               "southwest" : {
                  "lat" : 30.3116694,
                  "lng" : 120.3417691197085
               }
            }
         },
         "//":"地点ID是任何地点的另一个唯一标识符",
         "place_id" : "ChIJycYN2imYTDQRoLUHSrSQQE8",
         "types" : [ "route" ]
      },
   ],
   "//":"告诉我们请求是否成功，能在各种web服务间共享，详情查询前面状态代码链接",
   "//":"ok指找到一个或多个结果",
   "//":"ZERO_RESULTS表示地理编码成功，但未返回任何结果",
   "//":"invali request指请求中包含一些错误",
   "//":"unknown error通常指服务器错误并可重复请求直到成功",
   "//":"query limit error超过查询限制错误",
   "//":"request denied error请求被拒错误",
   "status" : "OK"
}

2. 地理编码应用

1
2
3
4
5
<!-- 提示用户选择城市中的一个区域，并添加缩放区域按钮 -->
  <div>
    <input type="text" id="zoom-to-area-text" value="enter your favourite area">
    <input type="button" id="zoom-to-area" value="Zoom">
  </div>
1
2
3
4
5
6
7
8
#zoom-to-area-text {
  position: relative;
  width: 70%;
}

#zoom-to-area {
  width: 24%;
}
1
2
3
4
//点击按钮缩放区域
document.getElementById('zoom-to-area').addEventListener('click',function () {
  zoomToArea();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//获取用户输入的地址,通过地理编码获得经纬度，然后放大
function zoomToArea() {
  // 创建一个新的地理编码器实例
  var geocoder = new google.maps.Geocoder();
  // 捕获用户输入的地址
  var address = document.getElementById('zoom-to-area-text').value;
  // 确保地址不是空白
  if (address == '') {
    window.alert('You must enter an area, or address.');
  } else {
    // 对地址进行地理编码
    geocoder.geocode(
      { address: address,
        //添加要素限制以确保在城市内
        componentRestrictions: {locality: '杭州市'}
      }, function(results, status) {
        //如果获得结果，检查地理编码器状态
        if (status == google.maps.GeocoderStatus.OK) {
          //通过获得的经纬度重新聚焦地图并放大
          map.setCenter(results[0].geometry.location);
          map.setZoom(15);
        } else {
          window.alert('We could not find that location - try entering a more' +
              ' specific place.');
        }
      });
  }
}

3. 海拔API

Elevation API
利用 Google Maps Elevation API，您可以通过一个简单的接口查询地球上各个位置的海拔高度数据。此外，您还可以请求路径沿途的抽样海拔高度数据，以便计算路线沿途的海拔高度变化。

海拔服务

查询 雷峰塔海拔

https://maps.googleapis.com/maps/api/elevation/json?locations=30.231596,120.14966&key=输入API

返回

1
2
3
4
5
6
7
8
9
10
11
12
13
{
   "results" : [
      {
         "elevation" : 16.24967765808105,
         "location" : {
            "lat" : 30.231596,
            "lng" : 120.14966
         },
         "resolution" : 152.7032318115234
      }
   ],
   "status" : "OK"
}

4. 距离矩阵API

使用给定出行方式计算多个起点与终点之间的行程距离和行程持续时间。

Distance Matrix API

Distance Matrix 服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<hr>
      <div>
        <span class="text">Within</span>
        <!-- 希望花费在通勤上的最长时间 -->
        <select id="max-duration">
          <option value="10">10 min</option>
          <option value="15">15 min</option>
          <option value="30">30 min</option>
          <option value="60">1 hour</option>
        </select>
        <!-- 出行方式 -->
        <select id="mode">
          <option value="DRIVING">drive</option>
          <option value="WALKING">walk</option>
          <option value="BICYCLING">bike</option>
          <option value="TRANSIT">transit ride</option>
        </select>
        <span class="text">of</span>
        <!-- 输入想要的地址和提示，以及前往按钮 -->
        <input type="text" id="search-within-time-text" placeholder="Ex:中国工商银行ATM ，浙江省杭州市江干区下沙学林街">
        <input type="button" id="search-within-time" value="Go">
      </div>
1
2
3
#search-within-time-text {
        width: 84%;
      }
1
2
3
4
//点击按钮计算出行时间
document.getElementById('search-within-time').addEventListener('click',function () {
  searchWithinTime();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
//使用distanceMatrixService计算每个标记和用户输入位置之间的距离和行程持续时间
function searchWithinTime() {
  //初始化distanceMatrixService
  var distanceMatrixService = new google.maps.DistanceMatrixService;
  //获得并检查地址
  var address =  document.getElementById('search-within-time-text').value;
  if (address == '') {
    window.alert('you must enter an address');
  }else{
    hideListings();
    //从标记列表中创建一个起点数组
    var origins =[];
    for (var i = 0; i < markers.length; i++) {
      origins[i] =markers[i].position;
    }
    //将用户输入地址作为终点
    var destination = address;
    //捕获用户输入的出行方式
    var mode = document.getElementById('mode').value;
    //调用getDistanceMatrix函数，传入起点、唯一终点、出行方式
    distanceMatrixService.getDistanceMatrix({
      origins:origins,
      destinations:[destination],
      travelMode: google.maps.TravelMode[mode],
      //指定距离单位为英制
      unitSystem:google.maps.UnitSystem.IMPERIAL,
    },function (response,status) {
      //收到返回的响应后，确认状态为OK
      if (status !== google.maps.DistanceMatrixStatus.OK) {
        window.alert('error was :' + status);
      }else{
        //显示符合用户输入条件的所有标记
        displayMarkersWithinTime(response);
      }
    });
  }
}

function displayMarkersWithinTime(response) {
  //捕获用户输入的最大行程持续时间
  var maxDuration = document.getElementById('max-duration').value;
  //从响应中重新捕获所有起点和终点
  var origins = response.originAddresses;
  var destinations = response.destinationAddresses;
  //为每个起点队和终点创建元素
  //此元素将包含从A点到B点的距离和行程时间
  var atLeastOne = false;
  for (var i = 0; i < origins.length; i++) {
    var results  = response.rows[i].elements;
    for (var j = 0; j < results.length; j++) {
      var element = results[j];
      if (element.status == "OK") {
        //文本形式捕获距离
        var distanceText = element.distance.text;
        //捕获行程时间的数值，方便下面比较用户设定的最大行程时间
        var duration =  element.duration.value/60;
        //文本形式捕获行程时间
        var durationText = element.duration.text;
        if (duration<=maxDuration) {
          //行程时间小于用户输入，显示标记
          markers[i].setMap(map);
          //即使状态OK也可能没找到在可接受通勤时间内的标记
          //所以设定atLeastOne变量让用户知道
          atLeastOne = true;
          //对于显示的每个标记创建一个小的信息窗口
          //在此信息窗口中显示持续时间和行程距离
          var infowindow = new google.maps.InfoWindow({
            content:durationText+'away,'+distanceText
          });
          infowindow.open(map,markers[i]);
          markers[i].infowindow = infowindow;
          //如果用户点击标记就关闭小的信息窗口，然后跳出大信息窗口显示全景图
          google.maps.event.addListener(markers[i],'click',function () {
            this.infowindow.close();
          });
        }
      }
    }
  }
}